<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		canvas{
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="800" height="500">你的浏览器不支持canvas</canvas>
	<script type="text/javascript" src="js/underscore-min.js"></script>
	<script type="text/javascript">
		//得到标签
		var canvas = document.getElementById("canvas");
		//上下文
		var ctx = canvas.getContext("2d");
		
		//小女孩
		function Girl(x,y){
			this.x = x; 
			this.y = y;
			//自己在哪种步子上，合法值0、1、2、3
			this.state = 0;	
		}
		//小女孩原型
		Girl.prototype = {
			// 更新自己
			update : function(){
				// 自己的状态
				this.state++;
				this.x+=3;
				//循环
				if(this.state > 3){
					this.state = 0;
				}
			},
			render : function(){
				ctx.drawImage(game.image ,  96 * this.state ,96 * 2  , 96,96,this.x , this.y ,96,96);
			}
		}

		//游戏控制类
		function Game(){
			var self = this;
			//加载图片
			this.image = new Image();
			this.image.src = "images/1.png";
			//图片加载完毕之后
			this.image.onload = function(){
				self.run();
			}

			//实例化一个小女孩，这个小女孩，就是game的属性
			//也就是说，game是统领一切的东西。
			this.girl = new Girl(100,100);

			//定时器属性
			this.timer = null;
		}
		//游戏控制类的原型
		Game.prototype = {
			//主循环
			mainloop : function(){
				//写具体的业务
				//清除整个画布
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				//更新小女孩
				this.girl.update();
				//渲染
				this.girl.render();
			},
			//开始主循环
			run : function(){
				//备份this，因为setInterval中的this就是window了
				var self = this;
				//定时器
				this.timer = setInterval(function(){
					self.mainloop();
				}, 60);
			},
			stop : function(){
				clearInterval(this.timer);
			}
		}

		var game = new Game();
	</script>
</body>
</html>